<template>
	<view class="home">
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input :type="!data.alShow?'password':'text'" v-model="data.oldpassword" class="u-m-l-20 u-m-r-20"
				placeholder="输入原密码" border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" @click="handleStatus('alShow')" v-if="data.alShow"
				width="40rpx" height="40rpx"></u-image>
			<u-image :fade="false" src="/static/images/icon_eye_n.png" @click="handleStatus('alShow')" v-else width="40rpx"
				height="40rpx"></u-image>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input :type="!data.newShow?'password':'text'" v-model="data.newpassword" class="u-m-l-20 u-m-r-20"
				placeholder="输入新密码" border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" v-if="data.newShow" @click="handleStatus('newShow')"
				width="40rpx" height="40rpx"></u-image>
			<u-image :fade="false" src="/static/images/icon_eye_n.png" v-else width="40rpx" @click="handleStatus('newShow')"
				height="40rpx"></u-image>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input :type="!data.conShow?'password':'text'" v-model="data.confirmPass" class="u-m-l-20 u-m-r-20"
				placeholder="确认新密码" border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" @click="handleStatus('conShow')" v-if="data.conShow"
				width="40rpx" height="40rpx"></u-image>
			<u-image :fade="false" src="/static/images/icon_eye_n.png" @click="handleStatus('conShow')" v-else width="40rpx"
				height="40rpx"></u-image>
		</view>
		<u-button customStyle="margin:130rpx auto 20rpx;height:100rpx;fontSize:36rpx;borderRadius:12rpx" type="primary"
			@click="_changepwd">确认</u-button>
	</view>
</template>
<script setup lang="ts">
	import { Ref, ref } from "vue";
	import { changepwd } from "../../config/api";
	type TypeData = {
		[prop : string] : String | Number | Function | Boolean
	}
	const data : Ref<TypeData> = ref({
		conShow: false,
		newShow: false,
		alShow: false,
		oldpassword: '',
		newpassword: '',
		confirmPass: ''
	});
	// 修改密码
	const _changepwd = () => {
		if (data.value.newpassword != data.value.confirmPass) {
			uni.$u.toast('两次密码不一致请重新输入')
			return
		}
		changepwd({ oldpassword: data.value.oldpassword, newpassword: data.value.newpassword }).then(res => {
			uni.$u.toast('修改成功,请重新登录')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		})
	}
	const handleStatus = (key : string) => {
		data.value[key] = !data.value[key]
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		padding: 110rpx 60rpx;
	}

	.login-input {
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 12px;
	}
</style>